<template>
	<div class="login-container">
		<div class="login-box">
			<!-- 头像区域 -->
			<div class="avatar-box">
				<img class="avatar" src="../assets/hualogo.png" />
			</div>
			<div class="login-title">用户登录</div>
			<!-- 表单区域 -->
			<div class="form-login">
				<!-- 登录名称 -->
				<div class="form-group">
					<label for="username">账号：</label>
					<el-input type="text" id="username" placeholder="请输入登录名称" autocomplete="off" v-model.trim="username" />
				</div>
				<!-- 登录密码 -->
				<div class="form-group">
					<label for="password">密码：</label>
					<el-input type="password" id="password" placeholder="请输入登录密码" v-model="password" />
				</div>
				<!-- 登录按钮 -->
				<!-- <div class="form-group">
					<el-button type="primary" class="btn"  @click="onLogin">登录</el-button>
				</div> -->
			</div>
			<div class="but">
				<el-button type="danger" class="btn" @click="onLogin">登录</el-button>
			</div>

		</div>
	</div>
</template>
<script setup>
import { ref } from 'vue'
const username = ref('')
const password = ref('')
import { useRouter } from 'vue-router'
const router = useRouter()
const onLogin = () => {
	if (username.value === 'admin' && password.value === '123456') {
		router.push('/home/guanyu')
		return localStorage.setItem('token', 'Bearer xxx')
	} else {
		alert('用户名或密码输入错误')
		localStorage.removeItem('token')
	}
}

</script>
<style lang="scss" scoped>
.login-container {


	font-size: 15px;
	width: 100%;
	height: calc(100vh);
	background-size: cover;
	background-position: center;
	background-image: url(../assets/logo-bg.jpg);
}

.form-group {
	display: flex;
	margin: 10px;
	width: 300px;
	height: 100px;
	align-items: center;
	writing-mode: horizontal-tb;
}


.login-box {

	width: 350px;
	float: left;

	background: rgba(255, 255, 255, 0.6);
	margin-left: 800px;
	padding: 10px;
	margin-top: 200px;
	border-radius: 10px;
	box-shadow: 2px 2px 10px #ddd;

	.login-title {
		font-size: 20px;
		text-align: center;
		margin-bottom: 10px;
	}

	.avatar {
		border-radius: 100px;
		margin-left: 80px;
	}
}

// .form-group label{
//   text-align: center;
// }
.btn {
	align-items: center;
	margin-left: 140px;
	margin-top: 20px;
	width: 80px;
	height: 50px;
	font-size: 30px;
	border-radius: 30px;
	margin-bottom: 40px;
}
</style>